<template>
    <div class="head-container">
        <div class="left-container">
            <el-button @click="handleMenu" icon="el-icon-s-fold" style="margin-right: 20px;"></el-button>
            <div class="search-container">
                <img src="@/assets/search.png" alt="Search Icon" class="search-icon" />
                <input type="text" class="search-box" placeholder="Search" />
            </div>
        </div>
        <div class="right-container">
            <div>
                <svg t="1731551252376" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2615" width="40" height="40">
                    <path
                        d="M512 212l48.8 12c101.6 24.8 176 117.6 176 220.8v254.4l18.4 18.4 24.8 25.6h-536l24.8-25.6 18.4-18.4V444.8c0-103.2 73.6-196.8 176-220.8l48.8-12M512 64c-36.8 0-64 30.4-64 68v30.4C320.8 192 223.2 307.2 223.2 444.8v228.8L136 763.2v44.8h752v-44.8l-87.2-89.6V444.8c0-137.6-97.6-252.8-224.8-283.2v-28.8c0-32-17.6-60.8-48-67.2-5.6-1.6-11.2-1.6-16-1.6z m88 808H424c0 49.6 38.4 88 88 88s88-38.4 88-88z"
                        p-id="2616" fill="#ffffff"></path>
                </svg>
            </div>
            <div @click="goToUser">
                <svg t="1731551059625" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="1480" width="40" height="40">
                    <path
                        d="M512 74.666667C270.933333 74.666667 74.666667 270.933333 74.666667 512S270.933333 949.333333 512 949.333333 949.333333 753.066667 949.333333 512 753.066667 74.666667 512 74.666667zM288 810.666667c0-123.733333 100.266667-224 224-224S736 686.933333 736 810.666667c-61.866667 46.933333-140.8 74.666667-224 74.666666s-162.133333-27.733333-224-74.666666z m128-384c0-53.333333 42.666667-96 96-96s96 42.666667 96 96-42.666667 96-96 96-96-42.666667-96-96z m377.6 328.533333c-19.2-96-85.333333-174.933333-174.933333-211.2 32-29.866667 51.2-70.4 51.2-117.333333 0-87.466667-72.533333-160-160-160s-160 72.533333-160 160c0 46.933333 19.2 87.466667 51.2 117.333333-89.6 36.266667-155.733333 115.2-174.933334 211.2-55.466667-66.133333-91.733333-149.333333-91.733333-243.2 0-204.8 168.533333-373.333333 373.333333-373.333333S885.333333 307.2 885.333333 512c0 93.866667-34.133333 177.066667-91.733333 243.2z"
                        fill="#ffffff" p-id="1481" class="icon"></path>
                </svg>

                <span>{{ userName }}</span>
            </div>
        </div>


    </div>
</template>

<script>
import Cookies from 'js-cookie';
export default {
    data() {
        return {
            userName: Cookies.get('name')

        };
    },
    methods: {
        handleMenu() {
            this.$store.commit('collapseMenu');

        },
        // 管理员页面
        goToUser() {
            this.$router.push('/user')
        }
    },
    watch: {


    },
    mounted() {


    },
}
</script>

<style lang="less">
.head-container {
    padding-left: 20px;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.left-container {
    width: 100%;
    display: flex;
    align-items: center;
    margin-left: 40px;
}

.search-container {
    position: relative;
    width: 80%;
}

.search-box {
    height: 30px;
    width: 110%;
    padding: 5px 10px 5px 40px;
    border: 3px solid #fff;
    border-radius: 20px;
    font-size: 16px;
    background-color: rgb(36, 54, 101);
    color: #fff;
    outline: none;
}

.search-box::placeholder {
    opacity: 1;
    color: #fff;
}

.search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
}

.right-container {
    width: 20%;
    display: flex;
    align-items: center;

    div {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        cursor: pointer;

        span {
            color: white;
            font-size: 18px;
        }

        &:hover {
            transform: scale(1.1);
            transition: all linear 0.2s;
            font-weight: bold;
        }
    }


}

.icon {
    width: 40px;
    height: 40px;
    margin: 0 10px;
}







.nav {
    margin-left: 20px;
    font-size: 18px;
    color: #333;
}
</style>
